<template>
<div>
  <img :src="caUrl">
<el-card>
  <div slot="header" class="has-text-centered has-text-weight-bold" style="font-size:20px;">
    后 台 管 理
  </div>
  <el-tabs tab-position="left" style="height: 420px;overflow: auto" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="👨‍💻用户管理" name="first">
      <el-card class="user-box" shadow="hover" v-for="item in users" :key="item.id">
        <img :src="item.avatar"  class="user-avatar">
        <span class="user-alias">{{item.alias}}<span v-if="item.roleId===1" class="user-role">(管理人员)</span></span>
        <span class="user-msg">{{item.email}} <br>{{item.mobile}}</span>
        <el-button size="small" class="user-btn" @click="uadd(item)" v-if="item.roleId!==1">➕添加为管理员</el-button>
        <el-button size="small" class="user-btn" @click="uadd(item)" v-if="item.roleId===1 && item.id!==user.id">➖移除该管理员</el-button>
      </el-card>
      <pagination
        v-show="upage.total > 0"
        :total="upage.total"
        :page.sync="upage.current"
        :limit.sync="upage.size"
        @pagination="uinit"
    />
    </el-tab-pane>
    <el-tab-pane label="🌏话题管理" name="second">
      <article v-for="(item, index) in articleList" :key="index" class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img :src="item.avatar" style="border-radius: 5px;">
          </figure>
        </div>
        <div class="media-content">
            <p class="ellipsis is-ellipsis-1">
              <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                <router-link :to="{name:'post-detail',params:{id:item.id}}">
                  <span class="is-size-6">{{ item.title }}</span>
                </router-link>
              </el-tooltip>
            </p>
          <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
            <div class="level-left">
              <div class="level-left">
                <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                  {{ item.alias }}
                </router-link>

                <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                <span
                    v-for="(tag, index) in item.tags"
                    :key="index"
                    class="tag is-hidden-mobile is-success is-light mr-1"
                >
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>

                <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
              </div>
            </div>
          </nav>
        </div>
        <router-link :to="{name:'topic-edit',params: {id:item.id,essence:true}}">
          <el-button size="small" style="margin-top: 7px;color: black;background:#ffe08a">编辑</el-button>
        </router-link>
        <el-button size="small" style="margin-top: 7px;margin-left:1%;color: white;background:#f14668"
                   @mouseleave="item.visible = false" @click="handleDelete(item)">删除</el-button>
      </article>

      <pagination
          v-show="tpage.total > 0"
          :total="tpage.total"
          :page.sync="tpage.current"
          :limit.sync="tpage.size"
          @pagination="tinit"
      />
    </el-tab-pane>
    <el-tab-pane label="📚文章管理" name="third">
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <article  v-for="item in bookList" :key="item.id" class="media mt-3" >
            <div class="media-content">
              <el-tooltip class="item" effect="dark" :content="item.bookName" placement="top">
                  <a class="is-size-6">📰{{item.bookName}}</a>
              </el-tooltip>
            </div>
            <el-button size="small" style="color: white;background:#f14668"
                       @click="handleDeleteBook(item)">删除</el-button>
          </article>
        </div>
      </el-card>
      <pagination
          v-show="bpage.total > 0"
          :total="bpage.total"
          :page.sync="bpage.current"
          :limit.sync="bpage.size"
          @pagination="binit"
      />
    </el-tab-pane>
    <el-tab-pane label="📜真题管理" name="fourth">
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <article  v-for="item in testList" :key="item.id" class="media mt-3">
            <div class="media-content">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <a class="is-size-6">📰{{item.name}}</a>
              </el-tooltip>
            </div>
            <el-button size="small" style="margin-top: 7px;margin-left:1%;color: white;background:#f14668"
                       @mouseleave="item.visible = false" @click="handleDeleteTest(item)">删除</el-button>
          </article>
        </div>
      </el-card>
      <pagination
          v-show="epage.total > 0"
          :total="epage.total"
          :page.sync="epage.current"
          :limit.sync="epage.size"
          @pagination="einit"
      />
    </el-tab-pane>
    <el-tab-pane label="🏷️标签管理" name="fifth">
      <el-tag v-for="(item,index) in tagList" :key="index"
              closable
              :disable-transitions="false"
              @close="handleClose(item)">
        标签名:<span style="color:red">{{item.name}}</span>, 话题数:<span style="color:red">{{item.topicCount}}</span>
      </el-tag>
        <el-form
            label-width="100px"
            class="demo-ruleForm">
          <el-form-item label="🏷️添加标签" prop="name">
            <el-input style="width:30%" v-model="newTag"></el-input>
            <el-button style="margin-left: 2%;width:10%" type="primary" @click="addNewTag">添 加</el-button>
          </el-form-item>
        </el-form>

    </el-tab-pane>


  </el-tabs>
</el-card>
</div>
</template>

<script>
import {mapGetters} from "vuex";
import {addAdmin, deleteBook, deleteTest, getAllUsers, getBooks, getTests} from "../api/admin";
import Pagination from '@/components/Pagination'
import {deleteTopic, getList} from "../api/post";
import {add, deleteById, getAll} from "../api/tag";
import {v4}  from 'uuid'
export default {
  name: "Admin",
  components: { Pagination },
  data(){
    return{
      caUrl:'http://8.130.24.164:8000/captcha?time='+new Date(),
      activeName:'first',
      users:'',
      articleList:[],
      tagList:[],
      bookList:[],
      testList:[],
      newTag:'',
      upage: {
        current: 1,
        size: 5,
        total: 0,
      },
      bpage:{
        current: 1,
        size: 5,
        total: 0,
      },
      tpage: {
        current: 1,
        size: 5,
        total: 0,
      },
      epage:{
        current: 1,
        size: 5,
        total: 0,
      }
    }
  },
  computed:{
    ...mapGetters(['user'])
  },
  mounted() {
  this.uinit()
  },
  methods:{
    uinit(){
      getAllUsers(this.upage.current, this.upage.size).then((res)=>{
        const { data } = res
        this.upage.current = data.current
        this.upage.total = data.total
        this.upage.size = data.size
        this.users = data.records
        console.log(res)
      })
    },
    //用户
    uadd(item){
      addAdmin(item.id).then((res)=>{
        if(item.roleId===1){
          item.roleId=0
        } else{
          item.roleId=1
        }
        this.$message.success(res.data)
      })
    },
    //话题
    tinit(){
      getList(this.tpage.current, this.tpage.size).then((response) => {
        const { data } = response
        this.tpage.current = data.current
        this.tpage.total = data.total
        this.tpage.size = data.size
        this.articleList = data.records
        console.log(this.articleList)
      })
    },
    //书籍
    binit() {
      getBooks(this.bpage.current, this.bpage.size).then((response) => {
        const { data } = response
        this.bpage.current = data.current
        this.bpage.total = data.total
        this.bpage.size = data.size
        this.bookList = data.records
      })
    },
    //试卷
    einit() {
      getTests(this.epage.current, this.epage.size).then((response) => {
        const { data } = response
        this.epage.current = data.current
        this.epage.total = data.total
        this.epage.size = data.size
        this.testList = data.records
      })
    },
    //标签
    ginit(){
      getAll().then((response) => {
        console.log(response)
        this.tagList=response.data
      })
    },
    handleClick(tab, event) {
      if(tab.index==="1"){
        this.tinit()
      }
      if (tab.index==="2"){
        this.binit()
      }
      if (tab.index==="3"){
        this.einit()
      }
      if(tab.index==="4"){
        this.ginit()
      }
      console.log(tab.index, event);
    },
    //删除话题
    handleDelete(item) {
      deleteTopic(item.id,1).then(value => {
        const { code, message } = value
        this.$message.success(message)
        console.log(code)
        if (code === 200) {
          setTimeout(() => {
            this.tinit()
          }, 500)
        }
      })
    },
    handleDeleteBook(item){
      console.log(item)
      deleteBook(item.bookId).then((res) => {
        this.$message.success(res.data)
        this.binit()
      })
    },
    handleDeleteTest(item){
      console.log(item)
      deleteTest(item.id).then((res) => {
        this.$message.success(res.data)
        this.einit()

      })
    },
    //删除标签
    handleClose(tag) {
      deleteById(tag.id).then((res) => {
        this.$message.success(res.data)
      })
      this.tagList.splice(this.tagList.indexOf(tag), 1);
    },
    //添加标签
    addNewTag(){
      console.log(this.newTag,"newTag")
      if(this.newTag!==""){
        let data={id:v4(),name:this.newTag,topicCount:0}
        console.log(data)
        add(data).then((res) => {
          this.ginit()
          this.$message.success(res.message)
        }).catch(() => {})
      }
      else{
        this.$message("请输入新的标签名")
      }
    }
    },
}
</script>

<style scoped>
.user-avatar{
  width:30px;
  height:30px;
}
.user-alias{
  position:absolute;
  margin-left: 3%;
  font-size: 16px;
}
.user-role{
  font-size: 14px;
  color:#409EFF;
}
.user-msg{
  position:absolute;
  margin-left: 20%;
  font-size: 7px;
}
.user-box{
  height:59px;
}
.user-btn{
  position:absolute;
  margin-left: 80%;
  margin-top: -3px;
  background:#409EFF;
  color: white;
}
.el-tag{
  margin-left: 10px;
  margin-top: 10px;
}
.el-form{
  margin-top: 5%;
}
</style>
